<template>
  <div style="height:100%;" ref="Screen">
    <div class="left" id="viz1" ref="viz1"></div>
  </div>
</template>

<script>
import NeoVis from 'neovis.js';

export default {
  name: "Paint",

  methods: {
    draw() {
      let viz1 = this.$refs.viz1;
      let viz;
      let config = {
        container_id: "viz",
        //neo4j服务器地址，用户名 和 密码
        server_url: "bolt://172.20.10.11:7687",
        server_user: "neo4j",
        server_password: "123456",

        labels: {
          "id": { caption: "name", community: "#4E5e6E", size: 200, font: { size: 34, color: "#606266", }, },
        },
        //
        relationships: {
          "组件": { thickness: 1, caption: true, font: { size: 3, color: "#606266", }, },
        },

        //是否显示箭头
        arrows: true,

        hierarchical: true,

        // 分层结构或者默认 "hubsize"（默认）和"directed".
        // hierarchical_sort_method: 'hubsize',
        hierarchical_sort_method: 'directed',

        //配置数据库查询语句，MATCH n RETURN n,尝试过不对，必须用 MATCH p=()-->() RETURN p
        initial_cypher: 'MATCH (n:Person) RETURN n LIMIT 25',
      }

      viz = new NeoVis(config);
      viz._container = viz1;
      viz.render();
    }

  },
  mounted() {
    this.draw();
  }


}
</script>

<style scoped>
  .left {
    height: 650px;
  }
</style>